<template>
  <div class="app-container">
    <div class="h-2 w-100 d-flex">
      <!-- 宿舍区 1号楼 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 d-flex item_border p10">
          <div class="h-100 w-50 pt-2">
            <div class="item_title pl-2">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">宿舍区1号楼</div>
              </div>
            </div>
            <div class="item_content p10 pt-3">
              <div class="h-100 w-100 d-flex item_bg_color2 borderRadius4 over-hidden">
                <div class="h-100 width_12 item_bg_warning"></div>
                <div class="h-100 width_calc12 d-flex flex-column justify-content-between pl-3 pt-3 pb-2 pr-2">
                  <div class="font-white font-14">总能耗</div>
                  <div class="d-flex align-items-center justify-content-center">
                    <div class="font-white-impact font-36 mr-2">{{$formatNumber2(oneCarData1.deviceValue)}}</div>
                    <div class="font-blue font-14 mt-3">kW·h</div>
                  </div>
                  <div>
                    <el-image class="image_size" :src="line_three" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="h-100 w-50">
            <div class="height-33 w-100 p10" v-for="(item,index) in oneCarData2" :key="index">
              <div class="h-100 w-100 d-flex item_bg_color2 borderRadius4 over-hidden">
                <div class="h-100 width_62 item_bg_success font-white font-30 d-flex-center">
                  {{oneCarDataTitle[index]}}
                </div>
                <div class="h-100 width_calc62 d-flex-center p10 pl-3">
                  <div class="font-white-impact text-center font-36 mr-2">{{$formatNumber2(item.deviceValue)}}</div>
                  <div class="font-blue font-14 pt-3">kW·h</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 宿舍区1号楼 每层总能耗 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区1号楼每层总能耗</div>
            </div>
          </div>
          <div class="item_content">
            <div class="w-100 h-100 d-flex align-items-center justify-content-between pt-3">
              <div class="width-20 h-100 mr-3 clearLastMb" v-for="(item,index) in twoCardData" :key="index">
                <div class="h-100 w-100 d-flex flex-column justify-content-between item_bg_color2 pt-3 pb-3 pl-2 pr-2">
                  <div class="font-white font-14">{{index + 1}}层总能耗</div>
                  <div class="d-flex align-items-center justify-content-center">
                    <div class="font-white-impact font-36">{{$formatNumber2(item.deviceValue)}}</div>
                  </div>
                  <div class="font-blue font-14 text-right mt-2">kW·h</div>
                  <div class="d-flex-center">
                    <div class="greenBar"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 d-flex">
      <!-- 宿舍区1号楼 能耗类型分布 -->
      <div class="h-100 w-9 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区1号楼能耗类型分布</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-3" id="bar_first"></div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="h-100 w-3">
        <!-- 1号楼能耗区域对比 -->
        <div class="h-50 w-100 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">宿舍区1号楼能耗区域对比</div>
              </div>
            </div>
            <div class="item_content">
              <div class="h-100 w-100 pt-3" id="pie_first"></div>
            </div>
          </div>
        </div>
        <!-- 1号楼能耗排名 -->
        <div class="h-50 w-100 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">宿舍区1号楼能耗排名</div>
              </div>
            </div>
            <div class="item_content">
              <div class="h-100 w-100 d-flex flex-column justify-content-between pt-3 pb-3">
                <div class="d-flex align-items-center" v-for="(item,index) in fiveCardData" :key="index">
                  <div class="width-20 d-flex align-items-center font-white">
                    <div class="border_three p-1 mr-2">#{{index + 1}}</div>
                    <div>{{item.xValue}}</div>
                  </div>
                  <div class="width-80">
                    <el-progress color="#07C160" :percentage="setItemProgress(item)"
                                 :format="format(item)"></el-progress>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListEnemyByNum,
    queryTwoListEnemyByNum,
    queryThreeListEnemyByReport,
    queryFourListEnemyByReport,
    queryFiveListEnemyByReport,
  } from "@/api/electrician/oneBuilding/energyAnalysis"

  export default {
    components: {},
    data() {
      return {
        line_three: require('@/assets/img/line_three.png'),
        timeout: [],

        oneCarData1: {
          deviceValue: ''
        },
        oneCarData2: [],
        oneCarDataTitle: ['东1', '东2', '西'],

        twoCardData: [],
        threeCardData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
          seriesData3: [],
          seriesData4: [],
        },
        fourCarData: [],
        fiveCardData: []
      }
    },
    created() {
    },
    mounted() {
      this.queryOneListEnemyByNum()
      this.queryTwoListEnemyByNum()
      this.queryThreeListEnemyByReport()
      this.queryFourListEnemyByReport()
      this.queryFiveListEnemyByReport()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListEnemyByNum()
        _this.queryTwoListEnemyByNum()
        _this.queryThreeListEnemyByReport()
        _this.queryFourListEnemyByReport()
        _this.queryFiveListEnemyByReport()
      }, 20000);

    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      setItemProgress(data) {
        if (this.$formatNumber2(data.yValue)==0) {
          return 0
        } else {
          return this.$formatNumber2(data.percent)
        }
      },

      format(percentage) {
        return () => {
          return this.$formatNumber2(percentage.yValue) + ' kW·h'
        }
      },

      queryOneListEnemyByNum() {
        queryOneListEnemyByNum().then(res => {
          let tempData = res.object
          this.oneCarData1.deviceValue = (Number(tempData[0].deviceValue) + Number(tempData[1].deviceValue) + Number(tempData[2].deviceValue)) == 0 ? '0.0' : (this.$formatNumber2(tempData[0].deviceValue) + this.$formatNumber2(tempData[1].deviceValue) + this.$formatNumber2(tempData[2].deviceValue)).toFixed(2)
          this.oneCarData2 = tempData
        })
      },
      queryTwoListEnemyByNum() {
        queryTwoListEnemyByNum().then(res => {
          let tempData = res.object || []
          this.twoCardData = tempData
        })
      },
      queryThreeListEnemyByReport() {
        queryThreeListEnemyByReport().then(res => {
          let tempData = res.object || []

          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          let seriesData3 = []
          let seriesData4 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(this.$formatNumber2(arr[0]))
            seriesData2.push(this.$formatNumber2(arr[1]))
            seriesData3.push(this.$formatNumber2(arr[2]))
            seriesData4.push(this.$formatNumber2(arr[3]))
          }

          this.threeCardData.xData = xData
          this.threeCardData.seriesData1 = seriesData1
          this.threeCardData.seriesData2 = seriesData2
          this.threeCardData.seriesData3 = seriesData3
          this.threeCardData.seriesData4 = seriesData4
          charts.barEchart('bar_first', this.threeCardData)
        })
      },
      queryFourListEnemyByReport() {
        queryFourListEnemyByReport().then(res => {
          let tempData = res.object || []
          let tempData2 = []
          for (let i = 0; i < tempData.length; i++) {
            tempData2.push({
              value: this.$formatNumber2(tempData[i].yValue),
              name: tempData[i].xValue,
            })
          }

          this.fourCarData = tempData2

          charts.pieEchart('pie_first', this.fourCarData)
        })
      },
      queryFiveListEnemyByReport() {
        queryFiveListEnemyByReport().then(res => {
          let tempData = res.object
          this.fiveCardData = tempData
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-progress-bar {
    width: 90%;
  }

  .height-33 {
    height: 33.33%;
  }

  .width-80 {
    width: 80%;
  }

  .width-20 {
    width: 25%;
  }

  .width_12 {
    width: 12px;
  }

  .width_calc12 {
    width: calc(100% - 12px);
  }

  .width_62 {
    width: 62px;
  }

  .width_calc62 {
    width: calc(100% - 62px);
  }

  .item_bg_success {
    background-color: #0B582A;
  }

  .item_bg_warning {
    background-color: #FFB822;
  }

  .item_bg_color2 {
    background-color: rgba(10, 52, 61, 0.62);
  }

  .border_three {
    background: rgba(12, 93, 88, 0.87);
    border: 1px solid #07c160;
  }

  .borderRadius4 {
    border-radius: 4px;
  }

  .clearLastMb:nth-last-child(1), {
    margin-right: 0 !important;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .font-blue {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #6CA7B4;
  }

  .greenBar {
    width: 85%;
    height: 12px;
    background: #07c160;
    border-radius: 43px;
  }

  .font-white-impact {
    font-family: Impact, Impact-400;
    font-weight: 500;
    color: #ffffff;
  }

  ::v-deep .el-progress__text {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff !important;
  }
</style>
